<template>
  <view class="select-main">
    <u-navbar title="选择技能" autoBack>
      <view class="u-nav-slot" slot="right">
        <view class="right-counter">
          <view
            class="right-items"
            :class="{
              active: selectRight == 1,
            }"
            @click="handleChangeRight(1)"
            >按品类</view
          >
          <view
            class="right-items"
            :class="{
              active: selectRight == 2,
            }"
            @click="handleChangeRight(2)"
            >按服务</view
          >
        </view>
      </view>
    </u-navbar>
    <view class="status_bar"> </view>
    <view class="top-search-main">
      <u-search
        placeholder="搜索关键词搜索技能"
        v-model="keyword"
        :showAction="false"
      ></u-search>
    </view>
    <view class="select-skill-counter">
      <view class="left-select-menu">
        <LeftMenu />
      </view>
      <view class="right-content">
        <view class="right-content-items">
          <view class="top-items-detail">
            <view class="left-detail">
              <text>家具</text>
              <view class="detail-text" @click="handleCheckDetail">
                详情
                <u-icon name="arrow-right" color="#9f9f9f" size="10"></u-icon>
              </view>
            </view>
            <view>
              <label class="radio"
                ><checkbox
                  value="cb"
                  checked="true"
                  style="transform: scale(0.7)"
                  activeBackgroundColor="#3478f6"
                  iconColor="#fff"
                />全选</label
              >
            </view>
          </view>
          <view class="items-content-main">
            <view class="content-item" :class="{ active: true }">家具拆除</view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="select-skill-bottom"
      :style="{
        zIndex: !showContentPopup ? 10076 : '',
      }"
    >
      <view class="left-info-main">
        <view class="info-select">已选 0 项</view>
        <view class="center-line"></view>
        <view class="info-detail" @click="handleCheckSelectDetail">
          详情
          <u-icon
            :name="showSelectPopup ? 'arrow-up' : 'arrow-down'"
            color="#616161"
            size="12"
          ></u-icon>
        </view>
      </view>
      <view class="right-btn-main">
        <view class="items-btn" @click="handleBack">上一步</view>
        <view class="items-btn success-btn" @click="handleSuccessSelect"
          >完成选择</view
        >
      </view>
    </view>
    <!-- 内容详情 -->
    <u-popup
      :show="showContentPopup"
      :round="4"
      :customStyle="{ width: '90%' }"
      mode="center"
      @close="close"
      closeable
    >
      <view class="content-detail-popup">
        <view class="detail-title">儿童玩具</view>
        <view class="table">
          <view class="table-row">
            <view class="table-cell">家具儿童家具测量</view>
            <view class="table-cell">无更多说明</view>
          </view>
        </view>
        <view class="know-btn" @click="showContentPopup = false">我知道了</view>
      </view>
    </u-popup>

    <!-- 已选择详情 -->
    <u-popup
      :show="showSelectPopup"
      :round="4"
      mode="bottom"
      @close="closeSelectPopup"
      closeable
    >
      <view class="select-popup-counter">
        <view class="select-popup-title">已选择技能</view>
        <view class="table">
          <view class="table-row">
            <view class="table-cell">几类安装</view>
            <view class="table-cell">摆阔茶几、交集、编辑、调剂、吭叽等</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import LeftMenu from "./component/LeftMenu.vue";
export default {
  components: {
    LeftMenu,
  },
  data() {
    return {
      selectRight: 1,
      keyword: "",
      showContentPopup: false,
      showSelectPopup: false,
    };
  },
  mounted() {},
  methods: {
    //
    handleChangeRight(type) {
      this.selectRight = type;
    },
    // 上一步
    handleBack() {
      uni.navigateBack();
    },
    // 完成选择
    handleSuccessSelect() {},
    // 详情
    handleCheckDetail() {
      this.showContentPopup = true;
    },
    // 关闭内容
    close() {
      this.showContentPopup = false;
    },
    // 查看一选择详情
    handleCheckSelectDetail() {
      this.showSelectPopup = true;
    },
    // 关闭已选择详情
    closeSelectPopup() {
      this.showSelectPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.select-main {
  .right-counter {
    display: flex;
    align-items: center;
    border: 2rpx solid #737373;
    border-radius: 8rpx;
    overflow: hidden;
    .right-items {
      padding: 8rpx 16rpx;
      font-size: 23rpx;
      color: #999;
      &.active {
        background: #737373;
        color: #fff;
      }
    }
  }
  .top-search-main {
    margin-top: 80rpx;
    width: 100%;
    background: #fff;
    padding: 16rpx 24rpx;
    box-sizing: border-box;
    ::v-deep .u-search__content {
      border-radius: 12rpx !important;
    }
  }
  .select-skill-counter {
    margin-top: 20rpx;
    height: calc(100vh - 300rpx);
    background: #fff;
    display: flex;
    gap: 24rpx;
    .left-select-menu {
      width: 200rpx;
      height: 100%;
      overflow: auto;
    }
    .right-content {
      flex: 1;
      overflow: auto;
      padding: 20rpx;
      box-sizing: border-box;
      &-items {
        margin-top: 30rpx;
        .top-items-detail {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left-detail {
            display: flex;
            align-items: center;
            gap: 18rpx;
            text {
              color: #333;
              font-size: 28rpx;
              font-weight: 500;
            }
            .detail-text {
              display: flex;
              align-items: center;
              gap: 6rpx;
              font-size: 24rpx;
              color: #9f9f9f;
            }
          }
          .radio {
            font-size: 26rpx;
          }
        }
        .items-content-main {
          margin-top: 24rpx;
          display: flex;
          align-items: center;
          align-items: stretch;
          gap: 24rpx 12rpx;
          flex-wrap: wrap;
          .content-item {
            width: 31%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            background: #f9f9f9;
            border-radius: 12rpx;
            font-size: 24rpx;
            color: #666;
            border: 2rpx solid transparent;
            padding: 16rpx 10rpx;
            box-sizing: border-box;
            text-align: center;
            &.active {
              background: #f8fbff;
              border-color: #b3dcf8;
              color: #b3dcf8;
            }
          }
        }
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
  .select-skill-bottom {
    width: 100%;
    height: 100rpx;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-info-main {
      display: flex;
      align-items: center;
      gap: 12rpx;
      .info-select {
        font-size: 26rpx;
        color: #616161;
      }
      .center-line {
        width: 2rpx;
        height: 20rpx;
        background: #616161;
      }
      .info-detail {
        display: flex;
        align-items: center;
        gap: 4rpx;
        color: #616161;
        font-size: 26rpx;
      }
    }
    .right-btn-main {
      display: flex;
      align-items: center;
      gap: 24rpx;
      .items-btn {
        padding: 12rpx 24rpx;
        border: 2rpx solid #4ca9ec;
        font-size: 28rpx;
        color: #4ca9ec;
        border-radius: 12rpx;
      }
      .success-btn {
        border: none;
        background: #4ca9ec;
        color: #fff;
      }
    }
  }
  .content-detail-popup {
    padding: 24rpx;
    box-sizing: border-box;
    .detail-title {
      text-align: center;
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
    }
    .know-btn {
      width: 100%;
      padding: 28rpx 0;
      background: #50aee8;
      border-radius: 8rpx;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      box-sizing: border-box;
      margin: 42rpx auto 0 auto;
    }
  }

  .select-popup-counter {
    padding: 24rpx;
    box-sizing: border-box;
    min-height: 600rpx;
    .select-popup-title {
      text-align: center;
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.table {
  display: block;
  width: 100%;
  margin-top: 50rpx;
  .table-row {
    display: flex;
    width: 100%;
    border-bottom: 2rpx solid #f2f2f2;
    border-radius: 8rpx;
    &:first-child {
      border-top: 2rpx solid #f2f2f2;
    }
    .table-cell {
      flex: 1;
      padding: 20rpx;
      border-right: 2rpx solid #f2f2f2;
      border-left: 2rpx solid #f2f2f2;
      text-align: left;
      font-size: 28rpx;
      color: #666;
      display: flex;
      align-items: center;
    }
    .table-cell:last-child {
      font-size: 26rpx;
      border-left: none;
      color: #999;
    }
  }
}
</style>
